<template>
  <ContentWrap>
    <div class="title">设备公司产成品领料申请单</div>
    <div class="disFlex justifySpaceBetween">
      <div class="formItem">
        <span>产品编号：</span>
        <span>{{ info.productNumber }}</span>
      </div>
      <div class="formItem">
        <span>产品名称：</span>
        <span>{{ info.productName }}</span>
      </div>
      <div class="formItem">
        <span>图纸图号：</span>
        <span>{{ info.productDrawingNumber }}</span>
      </div>
      <div class="formItem">
        <span>产品规格：</span>
        <span>{{ info.productStandard }}</span>
      </div>
      <div class="formItem">
        <span>领料单号：</span>
        <span>{{ info.getMaterialsFormNumber }}</span>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap>
    <div class="tab">
      <div class="tabHead disFlex">
        <div class="cell" :key="index" v-for="item, index in tableTitle">{{ item.label }}</div>
      </div>
      <div class="tabBody">
        <div v-for="val, index in list" :key="val.id" class="disFlex borderTop">
          <div class="cell" :key="j" v-for="item, j in tableTitle">{{ item.prop === 'index' ? index + 1 : val[item.prop] }}</div>
        </div>
      </div>
      <div class="disFlex borderTop">
        <div class="cell" style="text-align: center;" :key="j" v-for="item, j in tableTitle">
          <div v-if="j === 0">合计</div>
          <div class="" v-else-if="item.prop === 'requireQuantity'">{{ numTotal }}</div>
          <div class="" v-else></div>
        </div>
      </div>
    </div>
  </ContentWrap>
</template>
<script setup lang="ts">
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  info: {
    type: Object,
    default: () => {}
  }
})

const numTotal = ref(0)

const tableTitle = ref([
  {
    prop: "index",
    label: "序号",
    width:  100
  },
  {
    prop: "materialCategory",
    label: "材料类别",
    width:  100
  },
  {
    prop: "materialNumber",
    label: "物料编号",
    width:  100
  },
  {
    prop: "materialName",
    label: "物料名称",
    width:  100
  },
  {
    prop: "material",
    label: "材质",
    width:  100
  },
  {
    prop: "specification",
    label: "规格",
    width:  100
  },
  {
    prop: "dictUnit",
    label: "单位",
    width:  100
  },
  {
    prop: "baitingTotalSize",
    label: "下料尺寸（总）",
    width:  100
  },
  {
    prop: "processTotalSize",
    label: "工艺尺寸（总）",
    width:  100
  },
  {
    prop: "baitingTotalWeight",
    label: "下料尺寸总重(kg)",
    width:  100
  },
  {
    prop: "processTotalWeight",
    label: "工艺尺寸总重(kg)",
    width:  100
  },
  {
    prop: "requireQuantity",
    label: "需求数量",
    width:  100
  }
])

watch(
  () => props.list,
  (val) => {
    console.log(val, 'val')
    let sum = 0
    val.map(item => {
      sum += item.requireQuantity
    })
    numTotal.value = sum
  },
  {
    immediate: true
  }
)
</script>
